<template>
  <div>
    <header>
      <div class="header-top">
        <div class="location-con">
          <van-icon name="location-o" />
          <span class="location" @click="goCity">{{ cityName }}</span>
        </div>
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          background="linear-gradient(90deg, #009afc 53%, #34acf8 100%)"
          class="van-search"
          shape="round"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </div>
      <div class="header-bot">
        <ul>
          <li>每日推荐</li>
          <li>游乐场</li>
          <li>海滨沙滩</li>
          <li>山川之旅</li>
        </ul>
      </div>
    </header>
    <div class="main">
      <div class="nav">
        <div class="wrapper">
          <div class="nav-left">
            <van-grid
              :column-num="3"
              :square="true"
              icon-size="24px"
              class="nav-con"
            >
              <van-grid-item icon="gem-o" text="机票" to="/planeticket" />
              <van-grid-item icon="gift-card-o" text="车/船" to="/busticket" />
              <van-grid-item icon="goods-collect-o" text="火车" to="/train" />
              <van-grid-item icon="birthday-cake-o" text="住宿" to="/live" />
              <van-grid-item icon="bar-chart-o" text="接租" to="/renttaking" />
              <van-grid-item icon="newspaper-o" text="旅游" to="/travel" />
            </van-grid>
          </div>
          <div class="add">
            <van-icon name="chat-o" size="25" />
            <span>购物</span>
          </div>
        </div>
      </div>
      <div class="select">
        <div class="wrapper">
          <h2>
            <span>精选榜</span>
            <i>更多</i>
          </h2>
          <van-grid :border="false" :column-num="4">
            <van-grid-item>
              <img :src="indeximg[0]" />

              <em>国内热门</em>
            </van-grid-item>
            <van-grid-item>
              <img :src="indeximg[1]" />
              <em>国外度假</em>
            </van-grid-item>
            <van-grid-item>
              <img :src="indeximg[2]" />
              <em>迪士尼乐园</em>
            </van-grid-item>
            <van-grid-item>
              <img :src="indeximg[3]" />
              <em>迪士尼乐园</em>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <div class="nav-img">
        <img :src="indeximg[4]" alt="" />
        <span>追逐梦想的你,寻找着诗和远方</span>
      </div>
      <div class="recommend">
        <div
          class="recommend-con"
          v-for="item in recommendimg"
          :key="item.title"
        >
          <img :src="item.img" alt="" />
          <div class="user">
            <em>{{ item.area }}</em>
            <img :src="item.touxiang" alt="" />
            <span>{{ item.title }}</span>
            <van-icon name="eye-o" size="18" />
            <i>{{ item.num }}</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, computed } from "@vue/runtime-core";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  setup() {
    const store = useStore();
    const router = useRouter();
    onMounted(() => {
      store.dispatch("getIndexImg");
      store.dispatch("getRecommendImg");
    });
    const goCity = () => {
      router.push("/city");
    };
    const indeximg = computed(() => {
      // console.log(store.state.indeximg);
      return store.state.indeximg;
    });
    const recommendimg = computed(() => {
      // console.log(store.state.recommendimg);
      return store.state.recommendimg;
    });
    const cityName = computed(() => {
      return store.state.cityName;
    });
    return { indeximg, recommendimg, goCity, cityName };
  },
};
</script>
<style lang="less" scoped>
header {
  z-index: 2;
  position: fixed;
  left: 0;
  top: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  background: linear-gradient(90deg, #009afc 53%, #34acf8 100%);
  width: 100%;
  flex-direction: column;
  // padding-left: 24px;
  justify-content: space-around;
  align-items: center;
  color: white;
  .header-top {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
    .van-search {
      padding: 0;
      width: 269px;
      height: 27px;
      background: #ffffff;
      border-radius: 14px;
      position: relative;
      /deep/.van-search__action {
        color: white;
        text-align: center;
        display: inline-block;
        position: absolute;
        right: 5px;
        top: 5px;
        width: 50px;
        height: 20px;
        line-height: 20px;
        background: #23b9ff;
        border-radius: 10px;
        font-size: 14px;
        font-family: "PingFang SC";
        font-weight: 500;
      }
    }
    .location-con {
      line-height: 27px;
      .van-icon {
        font-size: 18px;
      }
      .location {
        font-size: 14px;
        margin-left: 5px;
      }
    }
  }
  .header-bot {
    ul {
      display: flex;
      width: 100%;
      justify-content: space-around;
      li {
        width: 63px;
        height: 23px;
        background: #6dc6ff;
        border-radius: 11px;
        font-size: 12px;
        line-height: 23px;
        text-align: center;
      }
    }
  }
}
.main {
  overflow: auto;
  background-color: white;
  position: relative;
  margin-top: 89px;
  padding-top: 20px;
  .nav {
    display: flex;
    width: 335px;
    position: relative;
    margin: 0 auto;
    .add {
      padding-top: 8px;
      color: white;
      text-align: center;
      font-size: 12px;
      position: absolute;
      display: flex;
      flex-direction: column;
      align-content: space-between;
      width: 55px;
      height: 102px;
      left: 280px;
      top: 0px;
      background: #009afc;
      border-radius: 0 7px 7px 0;
      .van-icon {
        margin-bottom: 10px;
      }
      span {
        display: block;
        margin: 0 auto;
        width: 20px;
        font-size: 24px;
        white-space: wrap;
      }
    }
  }
  /deep/ .nav-con {
    margin: 0 auto;
    width: 285px;
    background: #009afc !important;
    border-radius: 7px 0 0 7px !important;
    margin-bottom: 15px;

    .van-grid-item {
      height: 51px !important;
      padding: 0 !important;
      padding-top: 15px !important;
      font-size: 18px;
      color: white;

      .van-grid-item__text {
        color: white;
      }
      // border: 1px white solid !important;
    }
  }
  /deep/.van-grid-item__content {
    background-color: transparent !important;
  }
  /deep/.van-grid-item__icon + .van-grid-item__text {
    margin-top: 0;
  }
  .select {
    .wrapper {
      width: 335px;
      margin: 0 auto;
      img {
        width: 65px !important;
        height: 86px !important;
        margin-bottom: 5px;
      }
      em {
        font-size: 12px;
        font-weight: normal;
      }
      h2 {
        display: flex;
        justify-content: space-between;
        padding-left: 14px;
        padding-right: 14px;
        span {
          display: inline-block;
          width: 50px;
          height: 15px;
          font-size: 15px;
          font-family: PingFang SC;
          font-weight: 800;
          color: #101010;
          line-height: 12px;
        }
        i {
          display: inline-block;
          width: 26px;
          height: 12px;
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #101010;
          line-height: 12px;
        }
      }
    }
  }
  .nav-img {
    width: 335px;
    height: 50px;
    margin: 0 auto;
    position: relative;
    img {
      width: 335px;
      height: 60px;
      border-radius: 25px;
    }
    span {
      display: block;
      width: 250px;
      font-size: 16px;
      font-weight: 900;
      color: white;
      position: absolute;
      top: 50%;
      left: 60px;
      letter-spacing: 2px;
    }
  }
  .recommend {
    padding-top: 30px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-direction: row;
    width: 335px;
    margin: 0 auto;
    .recommend-con {
      margin-bottom: 10px;
      > img {
        width: 150px;
        height: 200px;
        border-radius: 8px 8px 0 0;
      }
      .user {
        img {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          vertical-align: middle;
          margin-right: 5px;
        }
        span {
          font-size: 12px;
          vertical-align: center;
          margin-right: 20px;
        }
        i {
          font-size: 12px;
          margin-left: 5px;
        }
        em {
          display: block;
          width: 80px;
          white-space: nowrap;

          height: 12px;
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #101010;
          line-height: 12px;
        }
      }
    }
  }
}
</style>
